<template>
  <div>
    <!--头部搜索栏完成-->
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form :form="form" style="display: flex; flex-wrap: wrap">
          <a-form-item :label="item.label" v-for="item in searchDB" :key="item.id" style="display: flex; margin: 10px">
            <a-col>
              <slot :name="item.slot"></slot>
            </a-col>
          </a-form-item>
          <div class="buttonGroup">
            <a-button type="primary" @click="clickSearch" class="button">查询</a-button>
            <a-button @click="clickReset" class="button">重置</a-button>
          </div>
        </a-form>
        
      </div>
    </a-card>
  </div>
</template>
<style scoped>
.button {
  margin: 0 10px;
}
.buttonGroup{
  margin-top: 13px;
}
</style>
<script>
import moment from 'moment'
export default {
  props: {
    searchDB: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    console.log(this.searchDB)
  },
  methods: {
    moment,
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.startDate = (moment(time[0]).format('YYYY-MM-DD')+' 00:00:00')
        form_values.endDate = (moment(time[1]).format('YYYY-MM-DD')+' 23:59:59')
      }
      this.$emit('search', form_values)
      console.log(form_values)
    },
    clickReset() {
      this.form.resetFields()
      const form_values = this.form.getFieldsValue()
      this.queryParam = form_values
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      console.log(form_values)
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
}
</script>